<template>
  <div>
    <div class="gallery-box">
      <div class="gallery-hd">
      <h3>{{ allItem.title }}</h3>
      <div class="publish">
        <span>发表时间：{{ allItem.ct }}</span>
        <span>点击次数：XX次</span>
      </div>
    </div>
    <div class="gallery-bd">
      <div class="preview">
        <!-- <img class="preview-img" v-for="(item, index) in list" 
        :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">-->
        <vue-preview :slides="list" @close="handleClose"></vue-preview>
        <!-- 生成figure标签，设置其scss样式改变不了(删除scoped) -->
      </div>
      <p>{{ allItem.title }}</p>
    </div>
    <comment-box :id="itemId"></comment-box>
    </div>
  </div>
</template>

<script>
import comment from "../../subcomponents/comment.vue";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      itemId: this.$route.params.itemId, //获取url中的id值，传给评论子组件
      type: this.$route.params.type,
      allItem: [],
      list: []
    };
  },
  created() {
    this.getDetail(this.itemId);
  },
  methods: {
    getDetail(id) {
      // console.log('123')
      var url = "https://route.showapi.com/852-2";
      var data = {
        showapi_appid: "88927", //这里需要改成自己的appid
        showapi_sign: "7132f458c7df46c88cdd908f5346fb25", //这里需要改成自己的应用的密钥secret
        type: this.type,
        page: 1
      };
      this.$http
        .post(url, this.$qs.stringify(data))
        .then(res => {
        //   console.log(res);
          if (res.data.showapi_res_body.ret_code == 0) {
            var singleCateList = res.data.showapi_res_body.pagebean.contentlist;
            singleCateList.forEach(ele => {
              if (ele.itemId == id) {
                this.allItem = ele;
                var listCell = ele.list;

                for (var index = 0; index < listCell.length; index++) {
                  var obj = {};
                  obj.src = listCell[index].middle;
                  obj.msrc = listCell[index].middle;
                  obj.id = index;
                  obj.w = 600;
                  obj.h = 400;
                  // console.log(obj);
                  // data中有定义的一定要带this
                  this.list.push(obj);
                }
              }
            });
          } else {
            Toast("图片详情加载失败");
          }
        })
        .catch(error => {
          Toast("Sorry, Please try again");
        });
    },
    handleClose() {
      console.log("close event");
    }
  },
  components: {
    "comment-box": comment //父组件传过来的参数，需要在子组件的vue文件中接收
  }
};
</script>

<style lang="scss">
// 去掉scoped设置的样式才有效
$baseColor: #26a2ff;
.gallery-box{
  overflow-y: auto;
}
.gallery-hd {
  padding: 10px 10px 5px;
  border-bottom: 1px solid #ccc;
  h3 {
    color: $baseColor;
    font-size: 14px;
    text-align: center;
  }
  .publish {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding-top: 5px;
  }
}
.gallery-bd {
  padding: 5px 10px 0;
  .my-gallery {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    figure {
      flex: 50%;
      // 设置flex-grow:0后即使换行后的元素个数不能铺满整行，元素也是保持设定的比例大小
      flex-grow: 0;
      margin: 0;
      padding: 5px;
      a {
        width: 100%;
        display: inline-block;
      }
      img {
        width: 100%;
        vertical-align: middle;
        box-shadow: 0 3px 8px #999;
        border-radius: 10px;
      }
    }
  }
  p {
    font-size: 12px;
    color: #000;
    line-height: 24px;
    text-indent: 2em;
    margin-top: 5px;
  }
}
</style>
